//城市服务商/客户经理---conent主页内容（大致一样）
import React,{Component} from 'react'
import { Row,Col,Form, Input,DatePicker ,Select,Table,Modal,message } from 'antd';
import Button from '../../components/button/button'
import AddUser from '../../components//AddUser/AddUser'    //添加账号
import PayRecord from '../../components/PayRecord/PayRecord'  //付费记录
import Modifyaccount from '../../components/Modifyaccount/Modifyaccount'   //修改账户
import Card from '../../components/card/card'
import Searchform from '../../components/SearchPanel/SearchPanel'
import * as tools from '../../tools/tools';
import $ from 'jquery'

import './Agent.css'
import image from '../../Picture/daili_normal.png'

const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const Option = Select.Option;


class Agent extends Component{
  constructor(props) {
    super(props);
    this.num = null;
    this.columnstype1 = [   //表格列的配置项
      { title: 'id', dataIndex: 'id', key: 'id',fixed: 'left' ,className:'iddisplay',
      sorter: (a, b) => a.number - b.number },
      { title : '上级id', dataIndex:'parent_id',key:'parent_idtype1',className:'iddisplay'},
      { title: '代理编号', dataIndex: 'identifier', key: 'identifier',},
      { title: '代理名称', dataIndex: 'name', key: 'name',
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.showModal}>{text}</span> },
      { title: '代理账号', dataIndex: 'mobile', key: 'mobile' },
      { title: '状态', dataIndex: 'status', key: 'status',
      render:(text)=><span>{text == -1 ?"禁用":"启用"}</span> },
      { title: '类型', dataIndex: 'normal', key: 'normal',
      render:(text)=><span>{text == -1 ?"已转正":"未转正"}</span>  },
      { title: '签约区域', dataIndex: 'province_name', key: 'province_name' },                //签约区域内容修改！
      { title: '签约人', dataIndex: 'signatory', key: 'signatory' },
      { title: '创建时间', dataIndex: 'created_at', key: 'created_at',
      render:(text)=><span>{new Date(text * 1000).toLocaleDateString()}</span>},
      { title: '客户经理数量', dataIndex: 'personal_num', key: 'personal_num' ,
      render:(text)=><span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.customermanager}>{text}</span>},
      { title: '签约商家', dataIndex: 'shop_num', key: 'shop_num', 
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} >{text}</span>},
      { title: '累计收益', dataIndex: 'profit', key: 'profit',
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} >{text}</span>}
    ];

    this.columnstype2 = [   //表格列的配置项
      { title: 'id', dataIndex: 'id', key: 'id',fixed: 'left' ,className:'iddisplay',
      sorter: (a, b) => a.number - b.number },
      { title: '代理编号', dataIndex: 'identifier', key: 'identifier'},
      { title: '代理名称', dataIndex: 'name', key: 'name',
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} onClick={this.showModal}>{text}</span> },
      { title: '代理账号', dataIndex: 'mobile', key: 'mobile' },
      { title: '状态', dataIndex: 'status', key: 'status',
      render:(text)=><span>{text == -1 ?"禁用":"启用"}</span> },
      { title: '类型', dataIndex: 'normal', key: 'normal',
      render:(text)=><span>{text == -1 ?"已转正":"未转正"}</span> },
      { title: '签约区域', dataIndex: 'province_name', key: 'province_name' },
      { title: '城市服务商', dataIndex: 'enterprise_name', key: 'enterprise_name' },
      { title: '签约费率', dataIndex: 'service_charge', key: 'service_charge' },
      { title: '签约人', dataIndex: 'signatory', key: 'signatory' },
      { title: '创建时间', dataIndex: 'created_at', key: 'created_at' ,
      render:(text)=><span>{new Date(text * 1000).toLocaleDateString()}</span>},
      { title: '签约商家', dataIndex: 'shop_num', key: 'shop_num' ,
      render:(text)=><span style={{color:'#4C8EDB',cursor:'pointer'}}>{text}</span>},
      { title: '累计收益', dataIndex: 'profit', key: 'profit',
      // sorter: (a, b) => a.number - b.number ,
      render: (text) => <span style={{color:'#4C8EDB',cursor:'pointer'}} >{text}</span>}
    ];
    this.columns = this.props.location.state.id ==18 ?this.columnstype1:this.columnstype2
    this.state = {
      visible:false,
      addvisible:false,
      payvisible: false,
      modifyvisible:false,
      proxynumber:null,
      disabled:'disabled',
      titleflag:1,
      citydata:'',
      newbutton:{
        background: '#D8D8D8',
        borderRadius: '100px',
        width:'88px',
        height:'30px',
        color:'#999999',
        marginLeft:'30px',
      },
      searchKeys:[
        {
          id : 'identifier',
          name : '代理编号',
          type : 1,
          
        },
        {
          id : 'mobile',
          name : '代理账号',
          type : 1,
          
        },
        {
          id : 'name',
          name : '代理名称',
          type : 1,
          
        },
        {
          id:'status',
          name:'状态',
          type:2,
          options : [
            {
                val : 1,
                text : '启用'
            },{
                val : -1,
                text : '禁用'
            }
          ]
        },
        {
          id : 'signatory',
          name : '签约人',
          type : 1,
          
        },
        {
          id : 'time',
          name : '创建时间',
          type : 3,
        }
      ],
      modaltitle:[
        {
            id:1,
            name:'账户信息'
        },
        {
            id:2,
            name:'银行信息'
        },
        {
            id:3,
            name:'签约信息'
        },
        {
            id:4,
            name:'操作日志'
        }
      ],
      Selectedata:null
    
    };
  }
  componentWillMount(){
    tools.loginView(this).then(
    this.agentlist()
    )
  }

  agentlist=()=>{
  
    $.ajax({
      url: tools.apiUrl+this.props.location.state.url,  //?page=1
      type :'Post',
      data:{
        'token':localStorage.token
      },
      success:(res)=>{
        if(res.status ==1){
          let columnsdata = [];
          let columnspage;
          for(var i in res.result){
            if(res.result[i].id){
              columnsdata.push(res.result[i])
            }else {
              columnspage=res.result[i]
            }  
          }
          this.setState({
            columnsdata:columnsdata,
            columnspage:columnspage
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  }
  
  customermanager=(e)=>{
    //跳转客户经理页面
    // console.log(e.target.parentNode.parentNode.firstChild.nextSibling.nextSibling.innerText)
  }

  handleSubmit = (data) => {        // from点击确认提交产生的数据---搜索
    data.token = localStorage.token;
    if(data.time && data.time.length > 0) {
        data.created_start_time = new Date(data.time[0]._d.getTime()).toLocaleDateString();
        data.created_end_time = new Date(data.time[1]._d.getTime()).toLocaleDateString();
        data.time = '';
    }
    //这里是搜索刷新列表
    console.log(data)
    tools.loginView(this).then(
    $.ajax({
      url: tools.apiUrl+this.props.location.state.url,  //?page=1
      type :'Post',
      data:data,
      success:(res)=>{
        if(res.status ==1){
          console.log(res)
          let columnsdata = [];
          let columnspage;
          for(var i in res.result){
            if(res.result[i].id){
              columnsdata.push(res.result[i])
            }else {
              columnspage=res.result[i]
            }  
          }
          this.setState({
            columnsdata:columnsdata,
            columnspage:columnspage
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }
 
  showModal=(e)=>{            //代理信息详情
    this.num = e.target.parentNode.parentNode.firstChild.nextSibling.innerText
    tools.loginView(this).then(
    $.ajax({
      type:'Post',
      url:tools.apiUrl +'agency/agency_info',
      data:{
        token: localStorage.token,
        id: this.num
      },
      success:(res)=>{
        if(res.status ==1){
          this.setState({
            modalcontent:res.result,
            visible: true
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }

//下面三个都是点击弹出modal事件
  addshowModal = () => {
    this.setState({
      addvisible: true
    });
  }
  modifyshowModal=()=>{
    $.ajax({
      type:'post',
      url:tools.apiUrl+'agency/agency_info',
      data:{
        token:localStorage.token,
        id:this.num
      },
      success:(res)=>{
        if(res.status ==1){
          this.setState({
            modifyvisible:true,
            visible:false,
            modifydata:res.result
          })
        }
      }
    })
  }

  handleCancel = () => {              //modal取消并且回传
    this.setState({visible: false});
  }
  titleclick=(obj)=>{    //点击modal样式改变
    this.setState({
        titleflag:obj
    })
  }

  payson=(obj)=>{                  //代理付费记录 

    $.ajax({
      type:'Post',
      url: tools.apiUrl+'agency/payment_record',
      data:{
        id: this.state.modalcontent.id,
        token: localStorage.token
      },
      success:(res)=>{
        if(res.status ==1){
          this.setState({
            recorddata:res.result,
            payvisible: true
          })
        }else{
          message.error(res.msg)
        }
        
      }
    })

  }

  tablechange=(pagination, filters, sorter)=>{            //table改变页数时的回调
    tools.loginView(this).then(
    $.ajax({
      type:'Post',
      url: tools.apiUrl+this.props.location.state.url+'?page='+pagination.current,
      data:{
        'token': localStorage.token
      },
      success:(res)=>{
        if(res.status ==1){
          let columnsdata = [];
          let columnspage;
          for(var i in res.result){
            if(res.result[i].id){
              columnsdata.push(res.result[i])
            }else {
              columnspage=res.result[i]
            }  
          }
          this.setState({
            columnsdata:columnsdata,
            columnspage:columnspage
          })
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }       

  revise=()=>{                //点击修改回调
    $.ajax({
      type:'post',
      url:tools.apiUrl+'agency/agency_info',
      data:{
        token:localStorage.token,
        id:this.state.Selectedata?this.state.Selectedata[0].id:this.num
      },
      success:(res)=>{
        if(res.status ==1){
          this.setState({
            modifyvisible:true,
            modifydata:res.result,
            visible:false,
          })
        }
      }
    })
  }
  becomeright=(data)=>{       //点击转正回调
    tools.loginView(this).then(
    $.ajax({
      type:'post',
      url:tools.apiUrl+'agency/agency_chage_normal',
      data:{
        token:localStorage.token,
        id:data[0].id
      },
      success:(res)=>{
        if(res.status ==1){
          this.agentlist();
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }

  DisableCount=(data)=>{                //点击停用回调
    tools.loginView(this).then(
    $.ajax({
      type:'post',
      url:tools.apiUrl+'agency/agency_chage_state',
      data:{
        token:localStorage.token,
        id:data[0].id,
        status:-1
      },
      success:(res)=>{
        if(res.status ==1){
          this.agentlist();
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }

  EnableCount=(data)=>{                //点击启用回调
    tools.loginView(this).then(
      $.ajax({
        type:'post',
        url:tools.apiUrl+'agency/agency_chage_state',
        data:{
          token:localStorage.token,
          id:data[0].id,
          status: 1
        },
        success:(res)=>{
          if(res.status ==1){
            this.agentlist();
          }else{
            message.error(res.msg)
          }
        }
      })
    )
  }

  Enableuser=(data)=>{    //启用停用
    tools.loginView(this).then(
    $.ajax({
      type:'post',
      url:tools.apiUrl+'agency/agency_chage_state',
      data:{
        token:localStorage.token,
        id:this.num,
        status: data
      },
      success:(res)=>{
        if(res.status ==1){
          this.agentlist();
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }
  regular=()=>{         //转正
    tools.loginView(this).then(
    $.ajax({
      type:'post',
      url:tools.apiUrl+'agency/agency_chage_normal',
      data:{
        token:localStorage.token,
        id:this.num
      },
      success:(res)=>{
        if(res.status ==1){
          this.agentlist();
        }else{
          message.error(res.msg)
        }
      }
    })
  )
  }
  addcancel=()=>{
    this.setState({
      addvisible:false
    })
  }
  paycancel=()=>{
    this.setState({
      payvisible:false
    })
  }
  modifycancel=()=>{
    this.setState({
      modifyvisible:false
    })
  }

  rowSelection = {   //列表和选择回调
    onChange: (selectedRowKeys, selectedRows) => {
      if(selectedRowKeys.length == 1){
        this.setState({
          newbutton:{
            border:'1px solid #4A90E2',
            borderRadius: '100px',
            width:'88px',
            height:'30px',
            color:'#4A90E2',
            marginLeft:'30px'
          },
          disabled:false,
          Selectedata:selectedRows
        })
      }else{
        this.setState({
          newbutton:{
            background: '#D8D8D8',
            borderRadius: '100px',
            width:'88px',
            height:'30px',
            color:'#999999',
            marginLeft:'30px',
          },
          disabled:'disabled'
        })
      }
    },
    type: 'radio',
  }

  render(){
    //下面这是水波纹Button组件的style
    const newbutton={
      border:'1px solid #4A90E2',
      borderRadius: '34px',
      width:'88px',
      height:'30px',
      color:'#4A90E2',
      marginLeft:'30px'
    }
    const totlebutton={
      border: '1px solid #50E3C2',
      borderRadius:'34px',
      width:'88px',
      height:'30px',
      color:'#50E3C2',
      position:'absolute',
      right:'100px'
    }
   
    const { getFieldDecorator } = this.props.form;

   return(
      <div className="city">
        <div className="city_search">
      
          <Searchform 
          onSearchCb={this.handleSubmit}
          searchKeys={this.state.searchKeys}  />

        </div>
        <div className="city_biaotou">
          <Button key="btn2" datastyle={newbutton}  onClick={this.addshowModal}>添加账号</Button>    
          <Button key="btn3" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={this.revise}>修改</Button>    
          <Button key="btn4" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={()=>this.becomeright(this.state.Selectedata)}>转正</Button>    
          <Button key="btn5" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={()=>this.DisableCount(this.state.Selectedata)}>停用</Button>   
          <Button key="btn6" datastyle={this.state.newbutton} disabled={this.state.disabled} onClick={()=>this.EnableCount(this.state.Selectedata)}>启用</Button>   
          <div className="city_daochu">
            <img src={image} alt="" style={{backgroundColor:"blue"}}/>
          </div>
          <Button key="btn7" datastyle={totlebutton}>表头设置</Button>                     {/*   这里几个button是控制下面table的*/}
        </div>
        <div className="city_table">
            <Table columns={this.columns} dataSource={this.state.columnsdata? this.state.columnsdata:false} scroll={{ x: 1700 }} 
              rowSelection={this.rowSelection} onChange={this.tablechange} style={{background:'#fff'}}
              pagination={{ pageSize: 10 ,showQuickJumper:true,total:this.state.columnspage  ? this.state.columnspage.last_page*10 :false}}>
            </Table>
            <div className="city_datanumber">
              <span >已为您匹配相关结果，共 {this.state.columnspage ?this.state.columnspage.total:false} 条记录</span>
            </div>
        </div>
        <div> 
               {/* 这里是页面内打开的模态框 */}

          <Modal title={this.props.location.state.id == 18?'城市服务商':'客户经理'} className="modal_box"
                visible={this.state.visible}
                footer={null}
                maskClosable={false}
                onCancel={this.handleCancel}
                bodyStyle={{height:'700px',overflow: 'auto'}}
                >
                <div className="modal_rightsider">  {/* modal右边点击按钮  */}
                    <ul>
                        <li onClick={this.revise}>修改</li>
                        <li onClick={()=>this.Enableuser(1)}>启用</li>
                        <li onClick={()=>this.Enableuser(-1)}>停用</li>
                        <li onClick={this.regular}>转正</li>
                        <li onClick={this.handleCancel}>关闭</li>
                    </ul>
                </div>
                <div className="modal_btnbox">
                    <ul>
                        {this.state.modaltitle.map((item,index)=>{
                              return(
                                  <li key={item.id} className={this.state.titleflag === index+1?"titleclick":""} 
                                      onClick={()=>this.titleclick(item.id)}>      
                                          {item.name}
                                  </li>
                              )
                          })}
                    </ul>
                </div>
                <div style={{marginTop:"30px",marginBottom:'60px'}}>
                    <Card head="账" item="1" modaldata={this.state.modalcontent ? this.state.modalcontent:false} ></Card>                 {/* 调用的组件  */}
                    <Card head="银" item="2" modaldata={this.state.modalcontent ? this.state.modalcontent:false} ></Card>
                    <Card head="签" item="3" modaldata={this.state.modalcontent ? this.state.modalcontent:false} payson={this.payson}></Card>

                </div>
            </Modal>
          <AddUser  show={this.state.addvisible} onCancel={this.addcancel}  type={this.props.location.state.id} ></AddUser>  {/* 添加账户 */}
          <PayRecord show={this.state.payvisible} onCancel={this.paycancel}  modaldata={this.state.recorddata?this.state.recorddata:false}></PayRecord> {/* 付费记录 */}
          <Modifyaccount show={this.state.modifyvisible} onCancel={this.modifycancel} modalid={this.num} selecteNum={this.state.modifydata?this.state.modifydata:false}></Modifyaccount>  {/*修改账户*/}
        </div>
      </div>
    )
  }
}
const WrappedNormalLoginForm  = Form.create()(Agent);

export default WrappedNormalLoginForm



